<template>
  <div style="display: flex; flex-wrap: wrap; justify-content: space-around;">
    <div class="cards" style="flex: 0 0 calc(50% - 10px); height: 400px;display: flex; align-items: center; justify-content: center;" id="bar"></div>
    <div class="cards" style="flex: 0 0 calc(50% - 10px); height: 400px;display: flex; align-items: center; justify-content: center;" id="pie"></div>
    <div class="cards" style="flex: 0 0 calc(50% - 10px); height: 400px;display: flex; align-items: center; justify-content: center;" id="category"></div>
    <div class="cards" style="flex: 0 0 calc(50% - 10px); height: 400px" id="category2"></div> <!-- 修改了id -->
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { reactive, onMounted} from "vue";
import request from "@/utils/request.js";

const barOption = {
  title: {
    text: '各部门员工数量'
  },
  tooltip: {},
  legend: {
    data: ['人数']
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: [
    {
      name: '人数',
      type: 'bar',
      data: [],
      itemStyle: {
          color: function (params) {
            // 莫兰迪色系用于柱状图
            let colors = ['#96a8c8', '#a7d2cb', '#f2d3ab', '#e8998d', '#f6c6c6', '#b2a6d9'];
            return colors[params.dataIndex % colors.length];
          }
      }
    }
  ]
};

const pieOption = {
  title: {
    text: '各类药材的种类数量'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)' // 显示名称、数量和百分比
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      itemStyle: {
          color: function (params) {
            // 莫兰迪色系用于饼图
            let colors = ['#96a8c8', '#a7d2cb', '#f2d3ab', '#e8998d', '#f6c6c6', '#b2a6d9'];
            return colors[params.dataIndex % colors.length];
          }
      }
    }
  ]
};

const orderChart = {
  title: {
    text: '2月份药材销量前7名'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function (params) {
      const data = params[0];
      return `药材名称: ${data.name}<br/>总金额: ${data.value}`;
    }
  },
  legend: {
    data: ['总销量']
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLabel: {
      rotate: 45, // 旋转 x 轴标签，避免文字重叠
      interval: 0 // 强制显示所有标签
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '总销量',
      data: [],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      itemStyle: {
          color: function (params) {
            // 莫兰迪色系用于柱状图
            let colors = ['#96a8c8', '#a7d2cb', '#f2d3ab', '#e8998d', '#f6c6c6', '#b2a6d9'];
            return colors[params.dataIndex % colors.length];
          }
      }
    }
  ]
};

// 在页面加载时，已经初始化完毕
onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const barChart = echarts.init(document.getElementById('bar'));
  request.get('/web/getBarChart').then(res => {
    barOption.xAxis.data = res.data.department;
    barOption.series[0].data = res.data.count;
    barChart.setOption(barOption);
  });

  const pieChart = echarts.init(document.getElementById('pie'));
  request.get('/web/getPieChart').then(res => {
    const {category, count} = res.data;
    const pieData = category.map((name, index) => ({
      value: count[index],
      name: name
    }));
    pieOption.series[0].data = pieData;
    pieChart.setOption(pieOption);
  });

  const orChart = echarts.init(document.getElementById('category'));
  request.get('/web/getcategory').then(res => {
    console.log(res);
    orderChart.xAxis.data = res.data.orders;
    orderChart.series[0].data = res.data.totalPrice;
    orChart.setOption(orderChart);
  });

});
const data = reactive({});
</script>
<style>
.cards {
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
  margin-bottom: 10px; /* 增加底部边距，让排列更美观 */
}
</style>